<template>
	<view>
		<view class="cell_item" @click="show = true">
			<view :class="['name', label ? '' : 'placeholder']">{{label || '请选择时间'}}</view>
			<view class="iconfont iconfont-e775"></view>
		</view>
		<u-picker v-if="params" v-model="show" mode="time" :params="params" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
export default {
	props: {
		value: {
			type: String,
			default: ''
		},
		mode: {
			type: String,
			default: ''
		}
	},
	components: {},
	data() {
		return {
			show: false,
			label:'',
			params: null
		};
	},

	mounted() {
		if (this.mode == 'FormTime') {
			this.params = {
				hour: true,
				minute: true,
				second: true
			};
		} else if(this.mode == 'FormDate') {
			this.params = {
				year: true,
				month: true,
				day: true
			};
		}else{
			this.params = {
				year: true,
				month: true,
				day: true,
				hour: true,
				minute: true,
			}
		}
	},

	methods: {
		confirm(obj) {
			let arr = Object.keys(obj)
			if(this.mode == 'dateTime'){
				let arr1 = arr.slice(0,3)
				let arr2 = arr.slice(3)
				this.label = ''
				this.label += this.getStr(arr1,'-',obj) + '  '
				this.label += this.getStr(arr2,':',obj)
			}else{
				let sign = this.mode == 'FormTime'?':': '-'
				this.label = this.getStr(arr,sign,obj)
			}
			this.$emit('input',this.label)
		},
		getStr (arr,sign,obj) {
			let str = ''
			arr.forEach((key,index)=>{
				str += (index > 0?sign:'') + obj[key]
			})
			return str
		}
	}
};
</script>

<style scoped lang="scss">
.cell_item {
	box-sizing: content-box;
	display: flex;
	align-items: center;
	border: 1px solid rgb(221, 229, 237);
	border-radius: 8rpx;
	padding: 0 20rpx;
	height: 68rpx;
	align-items: center;
	margin-bottom: 30rpx;
	&:active {
		background: #f5f5f5;
	}
	.name {
		flex: 1;
		overflow: hidden;
	}
	.iconfont {
		color: #999;
		position: relative;
		top: 2rpx;
	}
	.placeholder {
		color: #999;
	}
}
</style>
